import React from 'react'
import Nav from './Nav'
import { connect } from 'react-redux'
import {editTodo} from '../actions'

const TodoForm = ({dispatch}) => {
    let input
    return(
        <div>
        <Nav />
    <h1>Bearbeiten</h1>
            <form onSubmit={e => {
                e.preventDefault()
                if(!input.value.trim()){
                    return
                } dispatch(editTodo(input.value))
                input.value = ''
            }}>
                <input className="addTodo" ref={node => (input = node)} />
                <button type="submit">Speichern</button>
            </form>
        <button className="deleteButton">Eintrag löschen</button>
        </div>
        )
}

export default connect()(TodoForm)